<template>
    <div id="container" ></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
import axiosInstance from '@/utils/axios';

const map = ref(null); // 初始化 map 对象
const points = ref([]); // 动态存储点数据

// 初始化地图
const initMap = () => {
  if (!map.value) { // 避免重复初始化
    AMapLoader.load({
      key: "1cfd3a771aaf9dd11aa95a7472644c7e", // 填入注册账号后获取的 Key
      version: "2.0", // 指定要加载的 JSAPI 的版本
      plugins: [], // 需要使用的插件列表
    }).then((AMap) => {
      // 初始化地图
      map.value = new AMap.Map("container", {
        viewMode: "3D",
        zoom: 12,
        center: [116.52185,39.932357], // 初始地图中心
      });

      // 添加点标记到地图
      points.value.forEach((point) => {
        const marker = new AMap.Marker({
          position: point.machine_point, // 动态点位
          title: `电动车设备ID: ${point.machine_id}`, // 动态标题
          icon: new AMap.Icon({
            size: new AMap.Size(30, 30), // 图标大小
            image: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 默认蓝色标记
            imageSize: new AMap.Size(30, 30),
          })
        });

        if (point.machine_id % 2 === 0) {
          marker.setIcon(new AMap.Icon({
            size: new AMap.Size(30, 30),
            image: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png", // 红色标记
            imageSize: new AMap.Size(30, 30),
          }));
        }

        // 创建信息窗体
        const infoWindow = new AMap.InfoWindow({
          content: `<div style="padding: 10px;">
            <p><strong>设备ID:</strong> ${point.machine_id}</p>
            <p><strong>所在区域:</strong> ${point.area_name}</p>
            <p><strong>更新时间:</strong> ${point.update_time}</p>
            <p><strong>电池电量:</strong> ${point.machine_battery}%</p>
          </div>`,
          offset: new AMap.Pixel(0, -30), // 调整偏移量
          zIndex: 9999, // 设置较高的层级
        });

        // 绑定点击事件，显示信息窗体
        marker.on("click", (e) => {
          infoWindow.open(map.value, e.target.getPosition());
        });

        map.value.add(marker);
      });
    }).catch((e) => {
      console.error("地图加载失败：", e);
    });
  }
};

// 获取后端点数据
const fetchPoints = async () => {
  try {
    const data = { page: 1, page_size: 500 }
    const response = await axiosInstance.post("/api/machine_list", data); 
    if (response.data.success) {
      points.value = response.data.data.map(item => ({
        machine_id: item.machine_id,
        machine_point: item.machine_point, // 经纬度数组 [longitude, latitude]
        area_name: item.area_name, // 区域名称
        update_time: item.update_time, // 更新时间
        machine_battery: item.machine_battery, // 电池电量
      }));
    } else {
      console.error("数据获取失败：", response.data.message);
    }
  } catch (error) {
    console.error("请求失败：", error);
  }
};

onMounted(async () => {
  await fetchPoints(); // 先获取数据
  initMap()
});
</script>

<style>
#container {
  width: 100%;
  height: 700px;
  margin-top: 70px;
}
</style>
